4章 Turbo Frame と Turbo Stream テンプレート | Turbo Rails チュートリアル

Turbo Rails Tutorial - Chapter 4 Turbo Frames and Turbo Stream templates

（略）

https://scrapbox.io/files/62ff83455f711e0023ca3194.png

https://scrapbox.io/files/62ff845326b564001d42238c.png

code:erb

<%# app/views/quotes/new.html.erb %>

<main class="container">

<%= link_to sanitize("&larr; 見積の一覧に戻る"), quotes_path %>

<div class="header">

<h1>新規見積</h1>

</div>

<%= turbo_frame_tag "not_matching" do %>

<%= render "form", quote: @quote %>

<% end %>

</main>

Turbo Frame内のリンクをクリックした際、ターゲットページに同じIDのTurbo Frameが存在しない場合、TurboはソースページからTurbo Frameのコンテンツを削除し、エラーをログに出力します。

https://scrapbox.io/files/62ff8679a8d8f90023f28889.png

https://scrapbox.io/files/62ff8724a8d8f90023f28e73.png

code:erb

<%# app/views/quotes/index.html.erb %>

<main class="container">

<%= turbo_frame_tag "first_turbo_frame" do %>

<div class="header">

<h1>見積の一覧</h1>

<%= link_to "新規見積",

new_quote_path,

data: { turbo_frame: "second_frame" },

class: "btn btn--primary" %>

</div>

<% end %>

<%= turbo_frame_tag "second_frame" do %>

<%= render @quotes %>

<% end %>

</main>

code:erb

<%# app/views/quotes/new.html.erb %>

<main class="container">

<%= link_to sanitize("&larr; 見積の一覧に戻る"), quotes_path %>

<div class="header">

<h1>新規見積</h1>

</div>

<%= turbo_frame_tag "second_frame" do %>

<%= render "form", quote: @quote %>

<% end %>

</main>

----------

（略）

----------

お気づきのように、TurboフレームはRuby on Rails開発者のツールボックスへの重要な追加要素です。カスタムJavaScriptを一切書かずに、独立したコンテキストでページをスライスできるようになります。

この3つのルールで、見積エディタを構築するためのTurbo Framesの知識は十分すぎるほど得ましたが、まだ2つのことを学ぶ必要があります。

なにかいい習慣のもとで Turbo Frame に名前をつける方法

code:erb

<%# app/views/quotes/index.html.erb %>

<main class="container">

<div class="header">

<h1>見積の一覧</h1>

<%= link_to "新規見積", new_quote_path, class: "btn btn--primary" %>

</div>

<%= render @quotes %>

</main>

ターボフレームを用いた見積の編集

2つのうち簡単なほうである、見積編集機能から始めましょう。

https://scrapbox.io/files/62ffc291c18e9d0021d542f9.png

https://scrapbox.io/files/62ffc5cf19c5a7001dabd671.png

https://scrapbox.io/files/62ffc8ee1025cb001d0dbb09.png

code:erb

<%# app/views/quotes/_quote.html.erb %>

<%= turbo_frame_tag "quote_#{quote.id}" do %>

<div class="quote">

<%= link_to quote.name, quote_path(quote) %>

<div class="quote__actions">

<%= button_to "削除",

quote_path(quote),

method: :delete,

class: "btn btn--light" %>

<%= link_to "編集",

edit_quote_path(quote),

class: "btn btn--light" %>

</div>

</div>

<% end %>

code:erb

<%# app/views/quotes/edit.html.erb %>

<main class="container">

<%= link_to sanitize("&larr; 見積の一覧に戻る"), quote_path(@quote) %>

<div class="header">

<h1>見積の編集</h1>

</div>

<%= turbo_frame_tag "quote_#{@quote.id}" do %>

<%= render "form", quote: @quote %>

<% end %>

</main>

さて、この4行のコードだけを追加して、ブラウザでコードを試してみましょう。見積の「編集」ボタンをクリックしてみましょう。フォームが正常に見積カードを置き換えています。

フォームを送信して、期待通りに動作するか確認してみましょう。

（略）

Turbo Frameとdom_idヘルパー

code:ruby

# 見積もりが永続化され、そのIDが1の場合。

dom_id(@quote) # => "quote_1"

# もし見積が新しいレコードである場合。

dom_id(Quote.new) # => "new_quote" # 引用が新しいレコードの場合: dom_id(@quote) # => "new_quote"

# dom_id はオプションでプレフィックスの引数を取ることができることに注意してください。

# これはチュートリアルの後半で使用します。

dom_id(Quote.new, "prefix") # "prefix_new_quote"

code:erb

<%= turbo_frame_tag "quote_#{@quote.id}" do %>

...

<% end %>

<%= turbo_frame_tag dom_id(@quote) do %>

...

<% end %>

<%= turbo_frame_tag @quote %>

...

<% end %>

先ほど書いたコードをリファクタリングして、この糖衣構文を使えるようにしてみましょう。

code:erb

<%# app/views/quotes/_quote.html.erb %>

<%= turbo_frame_tag quote do %>

<div class="quote">

<%= link_to quote.name, quote_path(quote) %>

<div class="quote__actions">

<%= button_to "Delete",

quote_path(quote),

method: :delete,

class: "btn btn--light" %>

<%= link_to "Edit",

edit_quote_path(quote),

class: "btn btn--light" %>

</div>

</div>

<% end %>

code:erb

<%# app/views/quotes/edit.html.erb %>

<main class="container">

<%= link_to sanitize("&larr; 見積に戻る"), quote_path(@quote) %>

<div class="header">

<h1>見積の編集</h1>

</div>

<%= turbo_frame_tag @quote do %>

<%= render "form", quote: @quote %>

<% end %>

</main>

Turbo Frameに素敵な名前がついたことで、私たちは仕事を続けることができるようになりました。

見積の表示と削除

見積を表示するリンクが期待通りに動作しない。見積を含むTurbo Frameが消え、コンソールにエラーが記録される。

見積書を削除するボタンは、コンソールにエラーを記録します。

これらの問題はいずれも、さきほどのTurbo Frameのルール2に関係しています。ひとつひとつ解決していきましょう。

https://scrapbox.io/files/6300014e9d8f45001daf5b8c.png

https://scrapbox.io/files/63000209d453350022bec926.png

code:erb

<%# app/views/quotes/_quote.html.erb %>

<%= turbo_frame_tag quote do %>

<div class="quote">

<%= link_to quote.name,

quote_path(quote),

data: { turbo_frame: "_top" } %>

<div class="quote__actions">

<%= button_to "削除",

quote_path(quote),

method: :delete,

class: "btn btn--light" %>

<%= link_to "編集",

edit_quote_path(quote),

class: "btn btn--light" %>

</div>

</div>

<% end %>

引用を削除するフォームのターゲットを"_top" フレームにすることで、同じ方法で2つ目の問題を解決することができます。

code:erb

<%# app/views/quotes/_quote.html.erb %>

<%= turbo_frame_tag quote do %>

<div class="quote">

<%= link_to quote.name,

quote_path(quote),

data: { turbo_frame: "_top" } %>

<div class="quote__actions">

<%= button_to "削除",

quote_path(quote),

method: :delete,

form: { data: { turbo_frame: "_top" } },

class: "btn btn--light" %>

<%= link_to "編集",

edit_quote_path(quote),

class: "btn btn--light" %>

</div>

</div>

<% end %>

ブラウザでテストすると、期待通りに動作します！コンソールにエラーが表示されなくなりました！

https://scrapbox.io/files/63001f607df4d4001dc38e82.png

削除された見積を含むTurbo Frameのみを削除し、ページの残りの部分は変更せずに、ページの状態を維持することができればいいのですが。しかし、TurboとRailsが再び私たちの背中を押してくれました。先ほど「削除」ボタンに対して行ったことを取り除いてみましょう。

code:erb

<%# app/views/quotes/_quote.html.erb %>

<%= turbo_frame_tag quote do %>

<div class="quote">

<%= link_to quote.name,

quote_path(quote),

data: { turbo_frame: "_top" } %>

<div class="quote__actions">

<%= button_to "削除",

quote_path(quote),

method: :delete,

class: "btn btn--light" %>

<%= link_to "編集",

edit_quote_path(quote),

class: "btn btn--light" %>

</div>

</div>

<% end %>

Turbo Stream形式

Rails 7のフォームは、TURBO_STREAMフォーマットで送信されるようになりました。見積もりを破棄して、Railsサーバーのログで何が起こるかを検証してみましょう。

code:txt

Started DELETE "/quotes/908005781" for 127.0.0.1 at 2022-01-27 15:30:13 +0100

Processing by QuotesController#destroy as TURBO_STREAM

code:ruby

# app/controllers/quotes_controller.rb

def destroy

@quote.destroy

respond_to do |format|

format.html { redirect_to quotes_path, notice: "見積は正常に削除されました。" }

format.turbo_stream

end

end

他のフォーマットと同様に、対応するビューを作成しましょう。

code:erb

<%# app/views/quotes/destroy.turbo_stream.erb %>

<%= turbo_stream.remove "quote_#{@quote.id}" %>

見積を削除して、ブラウザの「ネットワーク」タブでレスポンス・ボディを検査してみましょう。ブラウザが受け取るHTMLは以下のようになるはずです。ただし、おそらく見積には別のIDが設定されているはずです。

code:html

<turbo-stream action="remove" target="quote_908005780">

</turbo-stream>

----------

（略）

----------

code:erb

<%# app/views/quotes/destroy.turbo_stream.erb %>

<%= turbo_stream.remove @quote %>

いよいよ最後の機能である新規見積に取り組みます。

Turbo Framesで新規見積機能を作成する

最後に必要な機能は、見積書の作成です。実装に入る前に、これから作るもののスケッチを少し描いておきましょう。

これを行うには、さらに2つのTurbo Frameが必要です。

新しい見積フォームを受け取る空のTurbo Frameが1つ。

新規作成された見積を正しい位置に追加するために、見積の一覧をラップするTurbo Frameを1つ用意します。

スケッチで説明すると、以下のような感じです。

https://scrapbox.io/files/6300cd83674c9a001d586181.png

https://scrapbox.io/files/6300ce8a19c5a7001db2bd6f.png

https://scrapbox.io/files/6300e18b674c9a001d58e7be.png

https://scrapbox.io/files/6300e21da8b770001d01e5eb.png

では、この解決策を実装してみましょう。

code:erb

<%# app/views/quotes/new.html.erb %>

<main class="container">

<%= link_to sanitize("&larr; 見積の一覧に戻る"), quotes_path %>

<div class="header">

<h1>新規見積</h1>

</div>

<%= turbo_frame_tag @quote do %>

<%= render "form", quote: @quote %>

<% end %>

</main>

code:ruby

turbo_frame_tag "new_quote"

turbo_frame_tag Quote.new

turbo_frame_tag @quote

code:erb

<%# app/views/quotes/index.html.erb %>

<main class="container">

<div class="header">

<h1>Quotes</h1>

<%= link_to "新規見積",

new_quote_path,

class: "btn btn--primary",

data: { turbo_frame: dom_id(Quote.new) } %>

</div>

<%= turbo_frame_tag Quote.new %>

<%= render @quotes %>

</main>

「新規見積」リンクをクリックすると、そのクリックはTurboによって傍受されます。

それでは、ブラウザでテストしてみましょう。うまくいきました。予想通り、フォームがページに表示されました

それでは、「見積書作成」ボタンをクリックして、名前を空白にしてフォームを送信してみましょう。見積書は無効となり、ページ上にエラーが表示されるはずです。ここで何が起こるか説明しましょう。

「新規見積」ボタンをクリックすると、フォームの送信はTurboに横取りされます。

あと少しです。スケッチで設計した機能を完成させるには、見積に有効な名前が与えられたときに、新しく作成した見積を見積一覧の先頭に挿入する必要があります。

今ブラウザでテストしてみると、見積はデータベースで作成されますが、作成された見積は見積一覧に追加されないことがわかります。

なぜでしょう?

code:ruby

# app/controllers/quotes_controller.rb

def create

@quote = Quote.new(quote_params)

if @quote.save

respond_to do |format|

format.html { redirect_to quotes_path, notice: "見積は正常に作成されました。" }

format.turbo_stream

end

else

render :new, status: :unprocessable_entity

end

end

つづいて、対応するビューを作成しましょう。

code:erb

<%# app/views/quotes/create.turbo_stream.erb %>

<%= turbo_stream.prepend "quotes", partial: "quotes/quote", locals: { quote: @quote } %>

<%= turbo_stream.update Quote.new, "" %>

このビューでは、Turboに2つのことを行うように指示しています。

code:erb

<%# app/views/quotes/index.html.erb %>

<div class="container">

<div class="header">

<h1>見積の一覧</h1>

<%= link_to "新規見積",

new_quote_path,

class: "btn btn--primary",

data: { turbo_frame: dom_id(Quote.new) } %>

</div>

<%= turbo_frame_tag Quote.new %>

<%= turbo_frame_tag "quotes" do %>

<%= render @quotes %>

<% end %>

</div>

では、ブラウザでテストしてみましょう。うまくいきました。有効な内容の新規見積フォームを送信する際に、開発ツールの「ネットワーク」タブを見ると、レスポンスボディには次のように表示されるはずです。

code:html

<turbo-stream action="prepend" target="quotes">

<template>

<turbo-frame id="quote_123">

<!-- The HTML for the quote partial -->

<turbo-frame>

</template>

</turbo-stream>

<turbo-stream action="update" target="new_quote">

<template>

<!-- An empty template! -->

</template>

</turbo-stream>

（略）

見積の並べ替え

code:ruby

# app/models/quote.rb

class Quote < ApplicationRecord

validates :name, presence: true

scope :ordered, -> { order(id: :desc) }

end

code:ruby

# app/controllers/quotes_controller.rb

def index

@quotes = Quote.ordered

end

これで、ページを更新しても、見積の順序は一定になりました。これは小さなことですが、何が起こっているのかが理解できることはユーザーにとって重要かもしれません。

この変更をおこなうと、見積の一覧の順序が同じでなくなるため、システムテストが壊れます。システムテストを更新して、再び合格するようにしましょう。

code:rb

# test/system/quotes_test.rb

setup do

# We need to order quote as well in the system tests

@quote = Quote.ordered.first

end

テストを実行してみましょう。すべて緑色になるはずです。見積もりエディタは、最初のスケッチで説明したとおりの外観になりました。新しいスキルを身につける必要がありましたが、実装は数行のコードで済みました。Turboは素晴らしいソフトウェアです。

キャンセルボタンの追加

code:erb

<%# app/views/quotes/_form.html.erb %>

<%= simple_form_for quote, html: { class: "quote form" } do |f| %>

<% if quote.errors.any? %>

<div class="error-message">

<%= quote.errors.full_messages.to_sentence.capitalize %>

</div>

<% end %>

<%= f.input :name, input_html: { autofocus: true } %>

<%= link_to "Cancel", quotes_path, class: "btn btn--light" %>

<%= f.submit class: "btn btn--secondary" %>

<% end %>

ユーザーが新規見積フォームの「キャンセル」リンクをクリックしたとき、

ユーザーが見積編集フォームの「キャンセル」リンクをクリックしたとき、

見積の作成と複数の見積の編集を同時に行おうとすると、ページの状態が保持されることに気がつきます。例えば、 見積を作成するとき、開かれたすべてのフォームが開かれたままになります。Turbo Frameはウェブページの独立した部分であり、カスタムのJavaScriptを書くことなく操作することができます。

まとめ

この章では、見積もりリソースに対する古典的なCRUDコントローラを、ほとんどコードもJavaScriptも使わない、最新のリアクティブ・アプリケーションに置き換えました。

では、作ったものを使って遊んでみましょう。見積を編集するフォームを開き、別の見積を破棄して、「新しい見積」ボタンをクリックしてみましょう。Reactのようなフロントエンドライブラリを使用する場合と比較して、管理すべき状態、ディスパッチすべき複雑なアクション、リデューサがありません...。Turboは楽しく作業できるのです

この章は内容が濃かったので、次の章に入る前に一息ついて、すべてが頭の中で整理されたことを確認しましょう

次の章では、Turbo StreamsをAction Cableでブロードキャストして、アプリケーションをリアルタイムに更新する方法について説明します。それでは、またお会いしましょう。

←前: